<template>
  <div class="feedback-container">
    <!-- 左侧边栏 -->
    <Sidebar />

    <!-- 右侧表单区域 -->
    <div class="main-content">
      <form @submit.prevent="submitFeedback" class="feedback-form">
        <!-- 投诉规定 -->
        <section class="form-section rules-section">
          <h3>投诉规定</h3>
          <ol>
            <li>如实填写信息</li>
            <li>不得恶意举报</li>
            <li>提交后不可更改</li>
          </ol>
        </section>

        <!-- 个人信息 -->
        <section class="form-section profile-section">
          <h3>个人信息</h3>
          <div class="form-group">
            <label for="name">姓名：</label>
            <input type="text" id="name" v-model="formData.name" required />
          </div>
          <div class="form-group">
            <label for="phone">联系方式：</label>
            <input type="tel" id="phone" v-model="formData.phone" required placeholder="例如：13800138000" />
          </div>
          <div class="form-group">
            <label for="email">邮箱地址：</label>
            <input type="email" id="email" v-model="formData.email" required />
          </div>
        </section>

        <!-- 投诉内容 -->
        <section class="form-section content-section">
          <h3>投诉内容</h3>
          <div class="form-group">
            <label for="subject">标题：</label>
            <input type="text" id="subject" v-model="formData.subject" required />
          </div>
          <div class="form-group">
            <label for="message">详细描述：</label>
            <textarea id="message" rows="5" v-model="formData.message" required></textarea>
          </div>

          <div class="form-group checkbox-label">
            <input type="checkbox" id="agree-policy" v-model="agreedToPrivacyPolicy" required />
            <label for="agree-policy">我已阅读并同意隐私政策</label>
          </div>
        </section>

        <!-- 提示信息 -->
        <p v-if="successMessage" class="success-message">{{ successMessage }}</p>
        <p v-if="errorMessage" class="error-message">{{ errorMessage }}</p>

        <!-- 提交按钮 -->
        <button type="submit" class="submit-button" :disabled="!canSubmit">提交反馈</button>
      </form>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import Sidebar from '@/components/Sidebar.vue'
// 表单数据
const formData = ref({
  name: '',
  phone: '',  
  email: '',
  subject: '',
  message: ''
})

// 是否勾选隐私政策
const agreedToPrivacyPolicy = ref(false)

// 成功/错误信息
const successMessage = ref('')
const errorMessage = ref('')

// 是否可以提交
const canSubmit = computed(() => {
  return (
    formData.value.name.trim() !== '' &&
    formData.value.phone.trim() !== '' &&
    formData.value.email.trim() !== '' &&
    formData.value.subject.trim() !== '' &&
    formData.value.message.trim() !== '' &&
    agreedToPrivacyPolicy.value
  )
})

// 模拟提交函数
const submitFeedback = () => {
  if (!canSubmit.value) {
    errorMessage.value = '请填写所有字段并同意隐私政策'
    successMessage.value = ''
    return
  }

  // 实际开发中应调用 API 提交数据
  console.log('提交的数据:', formData.value)

  // 清空表单
  formData.value = {
    name: '',
    phone: '',
    email: '',
    subject: '',
    message: ''
  }
  agreedToPrivacyPolicy.value = false

  successMessage.value = '感谢您的反馈！我们会在第一时间处理。'
  errorMessage.value = ''
}
</script>

<style scoped>
.feedback-container {
  display: flex;
 
  background-color: #2A2A3D;
}
.feedback-form{
  margin: 2rem;
  padding: 2rem;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  width: 100%;
  max-width: 800px;
  height: 100vh;
}
.main-content {
  flex: 1; /* 主内容区自动填充剩余空间 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
/**.sidebar {
  width: 250px;
  background-color: #2a2a3d;
  color: white;
  padding: 1rem;
  box-sizing: border-box;
  overflow-y: auto;
}**/

.form-section {
  margin-bottom: 2rem;
  /*padding-bottom: 1rem;*/
  /*border-bottom: 1px solid #eee;*/
}

.form-section:last-child {
  border-bottom: none;
  margin-bottom: 1rem;
}

h3 {
  margin-top: 0;
  color: #333;
}

ol {
  padding: 1.2rem;
  padding-left: 2.2rem;
  background-color: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  border: 1px solid #ddd;
  margin: 1rem 0;
}

.form-group {
  margin-bottom: 1rem;
}

label {
  display: block;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

input[type="text"],
input[type="tel"],
input[type="email"],
 
textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: normal;
}

.checkbox-label input {
  margin: 0;
}

.submit-button {
  width: 100%;
  padding: 0.75rem;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.submit-button:hover {
  background-color: #0056b3;
}

.submit-button:disabled {
  background-color: #3C3C54;
  cursor: not-allowed;
}

.success-message {
  color: green;
  margin-top: 1rem;
}

.error-message {
  color: red;
  margin-top: 1rem;
}
</style>